import React,{Component} from 'react';
import './orderlist.scss';
import './conOrder.scss';
import { calculateOrder, confirmOrder } from 'api/order.js';
import { getUserAddressList } from 'api/user.js';
export default class ConOrder extends Component{
	constructor(props){
    super(props)
    this.state = {
    	shops: '',
    	addresslist: {},
    	orderList: {},
    	goodsList: [],
    	pay_status: 0,
    	hide: 'card_hide',
    	addressList: []
    }
	}
	componentDidMount () {
		calculateOrder(this.props.location.state).then((res) => {
			if (res.code === -403) {
        this.props.history.push({
          pathname: '/login'
        })
      }
			if (res.code === 1) {
				if (res.data.defaultAddress) {
					this.setState({
						shops: res.data.defaultAddress,
						goodsList: res.data.goods
					})
				} else {
					this.props.history.push('/user/shipAddress')
				}
			}
		})
	}
	firmOrder = () => {
		confirmOrder({
			cart_ids:this.props.location.state.cart_ids,
			address_id: this.state.addresslist.user_address_id ? this.state.addresslist.user_address_id : this.state.shops.id
		}).then((res) => {
			if (res.code === 1) {
				this.props.history.push({
					pathname: '/user/order/orderlist',
					state: {
						...res.data,
						orderStatuCon: res.data[Object.keys(res.data)[0]].order_status
					}
				})
			}
		})
	}
	calculateOrderPrice = () => {
		let nums = 0
		this.state.goodsList.forEach((item) => {
			nums += item.goods_sum_price
		})
		return nums
	}
	ch_show () { //获取地址列表
		this.setState({
			hide: ''
		})
		getUserAddressList().then(res => {
			if (res.code == 1){
				this.setState({
					addressList: res.data
				})
			}
		})
	}
	getAddress (index) { //修改地址
		this.setState({
			addresslist: this.state.addressList[index],
			hide: 'card_hide'
		})
	}
	goBack = () => {
    this.props.history.goBack()
  }
	render(){
		return(
			<div className="orderlist">
				<div className="orderlist_title">
					<div onClick={this.goBack}><span className="glyphicon glyphicon-back"></span></div>
					<p>确认订单</p>
				</div>
				<div className="order_address" onClick={this.ch_show.bind(this)}>
					<div>
						<div>
							<span>收件人：</span>
							<span>{this.state.addresslist.user_address_contact ? this.state.addresslist.user_address_contact : this.state.shops.author}</span>
							<span>{this.state.addresslist.user_address_phone ? this.state.addresslist.user_address_phone : this.state.shops.tele}</span></div>
						<p>收货地址：{this.state.addresslist.user_address_area ? this.state.addresslist.user_address_area+this.state.addresslist.user_address_address : this.state.shops.address}</p>
					</div>
				</div>
				<div className="ordercard">
					{
						this.state.goodsList.map((item, index) => {
							return (
								<div key={index}>
									<div className="card_title">
										<p className="conorder">{item.shop_name}</p>
									</div>
									<div className="card_conent">
										{
											item.cart_goods.map((i, x) => {
												return(
													<div key={x}>
														<img src={i.goods_image}/>
														<div>
															<p>{i.goods_name}</p>
															{
																parseInt (i.goods_price) === 0 ?
																<span>面议</span>
																: <span>¥ {i.goods_price}</span>
															}
															<span>数量：{i.goods_num}件</span>
														</div>
													</div>
												)
											})
										}
										<p className="order_ord" style={{borderBottom:'none'}}>订单总额：¥{item.total_fee}(含运费：¥{item.transportFee.cost})</p>
									</div>
								</div>
							)
						})
					}
					<div className="zf">
						<div>总价格：￥{this.calculateOrderPrice()}</div>
						<span onClick={this.firmOrder}>确认订单</span>
					</div>
				</div>
				<div className={`querenorder ${this.state.hide}`}>
					<div className="changnadd">
						<p className="ch_title">请选择收件地址</p>
						{
							this.state.addressList.map((item,index) => {
								return(
									<div className="ch_box" key={index} onClick={this.getAddress.bind(this,index)}>
										<div className="ch_info">
											<div className="ch_name">{item.user_address_contact}</div>
											<div className="ch_name">{item.user_address_phone}</div>
										</div>
										<p className="ch_add">
										{item.user_address_default == 1 ? <span className="active">[默认地址]</span> : <span>收货地址：</span>}
										 {item.user_address_area+item.user_address_address}</p>
									</div>
								)
							})
						}
					</div>
				</div>
			</div>
		)
	}
}